<template>
  <div>
    <a-input-group>
      <a-row :gutter="16">
        <a-col :md="24" :sm="24" :xs="24">
          <a-input v-model:value="detailedAddress" readonly>
            <template #addonAfter>
              <EditOutlined @click="showModal"/>
            </template>
          </a-input>
        </a-col>
      </a-row>
    </a-input-group>
    <!-- 模态框部分-表单   -->
    <vxe-modal v-model="flagCollection.visibleFlag"
               id="addrEditModal"
               width="1000"
               title="地址信息编辑"
               :lock-view="false" :mask="false"
               show-footer show-zoom resize remember storage transfer dblclickZoom
               :destroy-on-close="true"
               @confirm="okFn"
               @cancel="cancelFn">
      <!--表单-->
      <a-row :gutter="16">
        <a-col :md="16" :sm="16" :xs="16">
          <ele-map-picker
            v-model:visible="flagCollection.showPickerFlag"
            :need-city="true"
            :search-type="1"
            @done="onChooseFn"/>
        </a-col>
        <a-col :md="8" :sm="8" :xs="8">
          <a-card title="编辑地址">
            <a-form :model="formData" :label-col="labelCol" :wrapper-col="wrapperCol" labelAlign="left"
            >
              <a-form-item label="地址简称">
                <a-input v-model:value="formData.addressAbbreviation" placeholder=""/>
              </a-form-item>

              <!--              地址类别选择-->
              <!--              <a-form-item :label="dict.dictItem" >-->
              <!--                <a-select v-model:value="formData.addressType" placeholder="请选择默认值">-->
              <!--                  <a-select-option-->
              <!--                    v-for="item in dict.dictOptions"-->
              <!--                    :key="item.dictName"-->
              <!--                    :value="item.dictName">{{ item.dictName }}-->
              <!--                  </a-select-option>-->
              <!--                </a-select>-->
              <!--              </a-form-item>-->
              <a-form-item label="地址类别">
                <a-input v-model:value="formData.addressType" readonly/>
              </a-form-item>
              <!--   业务id           -->
              <!--              <a-input v-model:value="formData.businessID" type="hidden"/>-->
              <!--    省市区三级联动        -->
              <a-form-item label="请选择省市区">
                <a-cascader
                  v-model:value="formData.cityValue"
                  :options="cityData.cityData"
                  placeholder="请选择省市区"
                  popup-class-name="ele-pop-wrap-higher"/>
              </a-form-item>
              <a-form-item label="街道地址">
                <a-textarea v-model:value="formData.streetAddress"/>


              </a-form-item>
              <a-form-item label="详细地址" :rows="6">
                <a-textarea v-model:value="formData.detailedAddress"/>
              </a-form-item>
              <!-- 经度纬度隐藏域  lon 经度 lat维度 -->
              <a-input type="hidden" v-model:value="formData.addressLongitude"></a-input>
              <a-input type="hidden" v-model:value="formData.addressLatitude"></a-input>
              <a-form-item label="邮编">
                <a-input v-model:value="formData.zipCode">
                </a-input>
              </a-form-item>
            </a-form>
          </a-card>

        </a-col>
      </a-row>
    </vxe-modal>

  </div>
</template>
<script>
//导入地图相关
//inject
import EleMapPicker from 'ele-admin-pro/packages/ele-map-picker';
import {EditOutlined} from '@ant-design/icons-vue';
import {defineComponent} from 'vue';
import AddrMapEdit from './js/index.js';

export default defineComponent({
  name: 'MAddrEdit',
  components: {
    EleMapPicker,
    EditOutlined
  },
  props: {
    AddressEntityData: {
      type: Object,
    },
    AddressStatus: {
      type: String,
      default: () => {
        return '停用';
      }
    },
    AddressType: {
      type: String,
      default: () => {
        return "客户"
      }
    }
  },
  emits: ['addrChange'],
  setup(props, context) {
    const {
      cityData,
      cityStr,
      dict,
      flagCollection,
      tempAddressEntityData,
      tempAddressStatus,
      detailedAddress,
      formData,
      locationData,
      labelCol,
      wrapperCol,
      showModal,
      okFn,
      cancelFn,
      onChooseFn,
    } = AddrMapEdit(props, context);
    return {
      cityData,
      cityStr,
      dict,
      flagCollection,
      tempAddressEntityData,
      tempAddressStatus,
      detailedAddress,
      formData,
      locationData,
      labelCol,
      wrapperCol,
      showModal,
      okFn,
      cancelFn,
      onChooseFn,
    }
  }


})
</script>
<style scoped>
.ant-card {
  height: 557px;
}


.ant-modal {
  max-width: 100%;
  top: 0;
  padding-bottom: 0;
  margin: 0;
}

.ant-modal-content {
  display: flex;
  flex-direction: column;
  height: calc(100vh);
}

.ant-modal-body {
  flex: 1;
}


</style>
